<template>
  <div>
    <div class="viewContain">
      <!-- 个人信息/登录模块 -->
      <div class="personInfo">
        <div class="avatar">
          <img v-if="!portrait" src="../../../assets/defaultAvatar.jpg" alt="">
          <img v-else :src="portrait" alt="">
        </div>
        <div class="nameAndPhone">
          <div class="userName">{{ userName }}</div>
          <div class="userPhone">{{ mobileNo }}</div>
        </div>
        <!-- <div class="nameAndPhone">
          <div class="userName">点击登录</div>
        </div> -->
      </div>

      <!-- 操作模块 -->
      <div class="operation">
        <div class="new-item">
          <div class="item" @click="toMyResume">
            <div class="logo">
              <img src="../../../assets/home/myresume.png" alt="">
            </div>
            <div class="name">我的简历</div>
          </div>
          <div style="margin: 0 12px; height: 1px; background-color: #f4f4f4;" />
          <div class="item" @click="handleDelivery">
            <div class="logo">
              <img src="../../../assets/home/mydelivery.png" alt="">
            </div>
            <div class="name">我的投递</div>
          </div>
        </div>
        <div class="new-item">
          <div class="item" @click="handleCollect">
            <div class="logo">
              <img src="../../../assets/home/my-collect.png" alt="">
            </div>
            <div class="name">我的收藏</div>
          </div>
          <div style="margin: 0 12px; height: 1px; background-color: #f4f4f4;" />
          <div class="item" @click="handleMyInterView">
            <div class="logo">
              <img src="../../../assets/home/interview.png" alt="">
            </div>
            <div class="name">我的面试</div>
          </div>
        </div>
        <div class="new-item">
          <div class="item" @click="toMatch">
            <div class="logo">
              <img src="../../../assets/home/person-fit.png" alt="">
            </div>
            <div class="name">人岗匹配</div>
          </div>
          <div style="margin: 0 12px; height: 1px; background-color: #f4f4f4;" />
          <div class="item" @click="handleJobfairs">
            <div class="logo">
              <img src="../../../assets/home/jobfairs.png" alt="">
            </div>
            <div class="name">报名招聘会</div>
          </div>
        </div>
        <!-- <div class="item">
          <div class="logo">
            <img src="http://ztyspim.e-tecsun.com/images/ic_user_7.png" alt="">
          </div>
          <div class="name">退出账号</div>
        </div> -->
      </div>
    </div>
    <TabBar :msg-num="msgNum" />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
export default {
  name: 'mine',
  components: {
    TabBar
  },
  data () {
    return {
      msgNum: 1,
      userName: '',
      mobileNo: '',
      portrait: ''
    }
  },
  methods: {
    // 前往简历页面
    toMyResume () {
      console.log('前往简历详情页面')
      this.$router.push({
        name: 'myResumeDetail',
        query: {
          type: 2,
          isEdit: false
        }
      })
    },
    handleJobfairs () {
      this.$router.push({ path: '/jobFairs' })
    },
    // 我的收藏
    handleCollect () {
      this.$router.push({ path: '/mine/myCollect' })
    },
    // 我的投递
    handleDelivery () {
      this.$router.push({ path: '/mine/myDelivery' })
    },
    // 我的面试
    handleMyInterView () {
      this.$router.push({ path: '/mine/interView' })
    },
    // 人岗匹配
    toMatch () {
      this.$router.push({ path: '/mine/match' })
    }
  }
}
</script>

<style lang="less">
.viewContain {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 0 0 calc(62px + env(safe-area-inset-bottom));
  background-color: #f4f4f4;
  .personInfo {
    height: 150px;
    background-color: #16B887;
    // border-radius: 20px;
    padding-left: 20px;
    line-height: 1.4;
    font-size: 16px;
    display: flex;
    color: #fff;
    align-items: center;
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .nameAndPhone {
      margin-left: 10px;
      .userPhone {
        margin-top: 3px;
      }
    }
  }
  .operation {
    padding: 12px 12px 0;
    .new-item{
      margin-bottom: 12px;
      border-radius: 6px;
      background-color: #fff;
    }
    .item {
      height: 40px;
      line-height: 40px;
      padding: 12px;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #333;
      &:active{
        background-color: #fafafa;
      }
      img{
        // width: 30px;
        height: 30px;
      }
      .name {
        margin-left: 10px;
      }
    }
  }
}
</style>
